<script setup>
// 导入头部
import HeaderTest from "./components/HeaderTest.vue";
import MainTest from "./components/MainTest.vue";
import { ref } from "vue";

// 监听来自 HeaderTest.vue 的 inputText 值变化
const headertest = ref(null);
const text = ref("");
// 添加待办事项的函数
const handleAdd = () => {
  // 接受子组件inputText的值
  text.value = headertest.value.inputText;
  headertest.value.inputText = "";
};
</script>

<template>
  <div class="box">
    <header>
      <!-- 通过属性透传将click事件传到子组件中 -->
      <HeaderTest @click="handleAdd" ref="headertest"> </HeaderTest>
    </header>
    <main>
      <MainTest :text="text"> </MainTest>
    </main>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
}
</style>
